<template>
  <el-dialog
    v-bind.sync="$attrs"
    destroy-on-close
    :visible.sync="isShowAddGoods"
  >
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item label="商品类型" prop="commodityType">
        <el-radio-group v-model="formData.commodityType" size="medium">
          <el-radio
            v-for="(item, index) in commodityTypeOptions"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 优惠卷 -->
      <el-form-item
        label="选择优惠券"
        prop="coupon"
        v-if="formData.commodityType == 2"
      >
        <el-select
          v-model="formData.coupon"
          placeholder="请选择选择优惠券"
          clearable
          :style="{ width: '100%' }"
          @change="couponChange"
        >
          <el-option
            v-for="(item, index) in couponOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input
          v-model.trim="formData.name"
          placeholder="请输入名称"
          :maxlength="100"
          show-word-limit
          :disabled="formData.commodityType == 2"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="价值" prop="worth">
        <el-input
          v-model="formData.worth"
          placeholder="请输入价值"
          :disabled="formData.commodityType == 2"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="数量" prop="num">
        <el-input-number
          v-model.trim="formData.num"
          :min="1"
          step-strictly
          placeholder="请输入数量"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="说明" prop="describe">
        <el-input
          v-model.trim="formData.describe"
          type="textarea"
          placeholder="请输入说明"
          :maxlength="50"
          show-word-limit
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      isShowAddGoods: false,
      formData: {
        commodityType: 1,
        coupon: null,
        name: null,
        worth: null,
        num: 1,
        describe: null,
      },
      rules: {
        coupon: [
          {
            required: true,
            message: '请选择选择优惠券',
            trigger: 'change',
          },
        ],
        worth: [
          {
            required: true,
            message: '请输入价值',
            trigger: 'blur',
          },
          {
            required: true,
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '价值为正数，且保留两位小数',
            trigger: 'blur',
          },
        ],
      },
      commodityTypeOptions: [
        {
          label: '实物',
          value: 1,
        },
        {
          label: '优惠券',
          value: 2,
        },
      ],
      couponOptions: [
        {
          label: '选项一',
          value: 1,
        },
        {
          label: '选项二',
          value: 2,
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //优惠券变化
    couponChange(val) {
      console.log(val)
    },
    submitForm() {
      this.$refs['elForm'].validate((valid) => {
        if (!valid) {
          return false
        } else {
          // TODO 提交表单
          this.$emit('submit', this.formData)
          this.isShowAddGoods = false
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    show() {
      this.isShowAddGoods = true
      this.resetForm()
    },
    // 取消按钮
    cancel() {
      this.isShowAddGoods = false
      this.resetForm()
      this.$emit('close')
    },
  },
}
</script>
<style>
</style>
